<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务卡片UI</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            margin-bottom: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2rem;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .current-time {
            font-size: 1.2rem;
            color: #64748b;
            margin-bottom: 20px;
            text-align: center;
        }

        /* 筛选栏样式 */
        .filter-bar {
            background-color: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .filter-group {
            flex: 1;
            min-width: 200px;
        }

        .filter-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #475569;
        }

        .filter-select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            background-color: #fff;
            color: #64748b;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 12px;
            position: relative;
            z-index: 1;
        }

        .filter-select option {
            display: none;
        }

        .filter-select:hover {
            border-color: #94a3b8;
        }

        .filter-select:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        /* 分组标题样式 */
        .group-title {
            margin: 30px 0 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e2e8f0;
            color: #2c3e50;
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        /* 修改任务卡片容器样式，支持水平滚动 */
        .task-group {
            margin-bottom: 40px;
        }
        
        .task-cards {
            display: flex;
            gap: 20px;
            padding: 10px 0;
            overflow-x: auto;
            scroll-behavior: smooth; /* 平滑滚动 */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }
        
        /* 隐藏默认滚动条 */
        .task-cards::-webkit-scrollbar {
            display: none;
        }
        
        /* 任务卡片固定宽度 */
        .task-card {
            flex: 0 0 300px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 20px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            transform: translateY(0);
        }
        
        .task-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        }
        
        .task-card__header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .task-card__title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #2c3e50;
            margin-right: 10px;
        }
        
        .task-card__priority {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .priority-high {
            background-color: #fee2e2;
            color: #ef4444;
        }
        
        .priority-medium {
            background-color: #fef3c7;
            color: #f59e0b;
        }
        
        .priority-low {
            background-color: #dcfce7;
            color: #10b981;
        }
        
        .task-card__date {
            color: #94a3b8;
            font-size: 0.85rem;
            margin-bottom: 15px;
        }
        
        .task-card__description {
            color: #475569;
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 20px;
        }
        
        .task-card__footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .task-card__status {
            display: flex;
            align-items: center;
        }
        
        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 6px;
        }
        
        .status-todo {
            background-color: #94a3b8;
        }
        
        .status-in-progress {
            background-color: #3b82f6;
        }
        
        .status-completed {
            background-color: #10b981;
        }
        
        .status-text {
            font-size: 0.85rem;
            color: #64748b;
        }
        
        .task-card__assigned {
            display: flex;
            align-items: center;
        }
        
        .assigned-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #e2e8f0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #64748b;
            font-weight: 600;
            font-size: 0.8rem;
        }
        
        .assigned-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
        
        /* 添加滚动控制按钮样式 */
        .task-group {
            position: relative;
        }
        
        .scroll-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #fff;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            transition: all 0.3s ease;
        }
        
        .scroll-button:hover {
            background-color: #f8fafc;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .scroll-button.prev {
            left: -20px;
        }
        
        .scroll-button.next {
            right: -20px;
        }
        
        .scroll-button svg {
            width: 20px;
            height: 20px;
            fill: #64748b;
        }
        
        /* 在移动设备上隐藏滚动按钮 */
        @media (max-width: 768px) {
            .scroll-button {
                display: none;
            }
            
            .task-cards {
                padding: 10px;
            }
        }
        
        @media (max-width: 480px) {
            .task-cards {
                grid-template-columns: 1fr;
            }
        }

        /* 添加任务统计样式 */
        .stats-container {
            background-color: #fff;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 600;
            color: #3b82f6;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #64748b;
            font-size: 0.9rem;
        }

        .group-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .group-stats {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .group-stat {
            display: flex;
            align-items: center;
            padding: 4px 12px;
            background-color: #f1f5f9;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        .group-stat-label {
            color: #64748b;
            margin-right: 5px;
        }

        .group-stat-number {
            color: #3b82f6;
            font-weight: 600;
        }

        .priority-stat.high {
            background-color: #fee2e2;
            color: #ef4444;
        }

        .priority-stat.medium {
            background-color: #fef3c7;
            color: #f59e0b;
        }

        .priority-stat.low {
            background-color: #dcfce7;
            color: #10b981;
        }

        .status-stat.todo {
            background-color: #f1f5f9;
            color: #64748b;
        }

        .status-stat.in-progress {
            background-color: #dbeafe;
            color: #3b82f6;
        }

        .status-stat.completed {
            background-color: #dcfce7;
            color: #10b981;
        }

        /* 添加抽屉样式 */
        .layout-container {
            display: flex;
            min-height: 100vh;
        }

        .drawer {
            width: 280px;
            background-color: #fff;
            border-right: 1px solid #e2e8f0;
            padding: 20px;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            overflow-y: auto;
            transition: transform 0.3s ease;
            z-index: 1000;
        }

        .drawer-header {
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e2e8f0;
        }

        .drawer-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #2c3e50;
        }

        .drawer-content {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .main-content {
            flex: 1;
            margin-left: 280px;
            padding: 20px;
            transition: margin-left 0.3s ease;
        }

        .drawer-toggle {
            position: fixed;
            left: 280px;
            top: 20px;
            background-color: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1001;
            transition: left 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .drawer-toggle:hover {
            background-color: #f8fafc;
        }

        .drawer-toggle svg {
            width: 20px;
            height: 20px;
            fill: #64748b;
            transition: transform 0.3s ease;
        }

        /* 抽屉收起状态 */
        .drawer-collapsed .drawer {
            transform: translateX(-280px);
        }

        .drawer-collapsed .main-content {
            margin-left: 0;
        }

        .drawer-collapsed .drawer-toggle {
            left: 20px;
        }

        .drawer-collapsed .drawer-toggle svg {
            transform: rotate(180deg);
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .drawer {
                box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
            }

            .main-content {
                margin-left: 0;
            }

            .drawer-toggle {
                left: 20px;
            }

            .drawer {
                transform: translateX(-280px);
            }

            body.drawer-open .drawer {
                transform: translateX(0);
            }
        }

        /* 修改筛选组样式适应抽屉 */
        .filter-group {
            width: 100%;
            min-width: unset;
        }

        .filter-select {
            width: 100%;
        }

        /* 添加搜索框样式 */
        .search-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            background-color: #fff;
            color: #64748b;
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

        .search-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .search-input::placeholder {
            color: #94a3b8;
        }

        /* 添加多选下拉框样式 */
        .filter-select[multiple] {
            height: auto;
            min-height: 120px;
            padding: 8px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .filter-select[multiple]:hover {
            border-color: #94a3b8;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .filter-select[multiple]:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .filter-select[multiple] option {
            padding: 10px 12px;
            margin: 4px 0;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.95rem;
            color: #475569;
            transition: all 0.2s ease;
            border: 1px solid transparent;
            background-color: #f8fafc;
        }

        .filter-select[multiple] option:hover {
            background-color: #f1f5f9;
            border-color: #e2e8f0;
        }

        .filter-select[multiple] option:checked {
            background-color: #3b82f6;
            color: white;
            border-color: #2563eb;
            font-weight: 500;
        }

        .filter-select[multiple] option:checked:hover {
            background-color: #2563eb;
        }

        /* 添加滚动条样式 */
        .filter-select[multiple]::-webkit-scrollbar {
            width: 8px;
        }

        .filter-select[multiple]::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 4px;
        }

        .filter-select[multiple]::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        .filter-select[multiple]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 优化筛选组样式 */
        .filter-group {
            margin-bottom: 16px;
        }

        .filter-label {
            font-size: 0.9rem;
            font-weight: 500;
            color: #475569;
            margin-bottom: 8px;
            display: block;
        }

        /* 添加选中项计数 */
        .filter-group {
            position: relative;
        }

        .filter-group::after {
            content: attr(data-selected-count);
            position: absolute;
            right: 8px;
            top: 28px;
            background-color: #3b82f6;
            color: white;
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 10px;
            display: none;
        }

        .filter-group.has-selection::after {
            display: block;
        }

        /* 添加复选框容器样式 */
        .filter-select-wrapper {
            position: relative;
        }

        .checkbox-container {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            margin-top: 4px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            z-index: 1001;
            max-height: 200px;
            overflow-y: auto;
            padding: 8px 0;
        }

        .filter-select-wrapper select {
            pointer-events: none;
        }

        .filter-select-wrapper .filter-select {
            height: 38px;
            line-height: 22px;
            padding-right: 30px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .checkbox-container.show {
            display: block;
        }

        /* 复选框选项样式 */
        .checkbox-option {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            cursor: pointer;
            transition: background-color 0.2s;
            position: relative;
            z-index: 2;
        }

        .checkbox-option:hover {
            background-color: #f8fafc;
        }

        .checkbox-option input[type="checkbox"] {
            margin-right: 8px;
            width: 16px;
            height: 16px;
            border: 2px solid #e2e8f0;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .checkbox-option input[type="checkbox"]:checked {
            background-color: #3b82f6;
            border-color: #3b82f6;
        }

        .checkbox-option label {
            flex: 1;
            cursor: pointer;
            user-select: none;
            color: #475569;
            font-size: 0.9rem;
        }

        /* 选中项计数样式 */
        .selected-count {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #3b82f6;
            color: white;
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 10px;
            display: none;
        }

        .filter-group.has-selection .selected-count {
            display: block;
        }

        /* 添加滚动条样式 */
        .checkbox-container::-webkit-scrollbar {
            width: 8px;
        }

        .checkbox-container::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 4px;
        }

        .checkbox-container::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        .checkbox-container::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 修改抽屉内的筛选组样式 */
        .drawer .filter-group {
            margin-bottom: 24px;
        }

        /* 确保下拉框在其他元素之上 */
        .drawer {
            z-index: 100;
        }

        .checkbox-container {
            z-index: 1001;
        }

        .task-dates {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .task-date {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #666;
            font-size: 0.85rem;
        }

        .task-date i {
            color: #3498db;
        }

        /* 添加任务按钮优化 */
        .add-task-btn {
            position: fixed;
            right: 2rem;
            bottom: 2rem;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4b6cb7, #182848);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 100;
            border: none;
        }

        .add-task-btn::before {
            content: '+';
            font-size: 2rem;
            font-weight: 300;
            line-height: 1;
        }

        .add-task-btn:hover {
            transform: translateY(-2px) rotate(90deg);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        }

        @media (max-width: 768px) {
            .add-task-btn {
                right: 1rem;
                bottom: env(safe-area-inset-bottom, 1rem);
                width: 48px;
                height: 48px;
            }
            
            .add-task-btn::before {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="layout-container">
        <!-- 左侧抽屉 -->
        <div class="drawer">
            <div class="drawer-header">
                <h2 class="drawer-title">筛选条件</h2>
            </div>
            <div class="drawer-content">
                <div class="filter-group">
                    <label class="filter-label">搜索任务</label>
                    <input type="text" class="search-input" id="taskSearch" placeholder="输入关键词搜索任务...">
                </div>
                <div class="filter-group">
                    <label class="filter-label">按负责人</label>
                    <div class="filter-select-wrapper">
                        <div class="filter-select" id="assigneeView">选择负责人</div>
                        <div class="selected-count">0</div>
                        <div class="checkbox-container">
                            <div class="checkbox-option select-all">
                                <input type="checkbox" id="assignee-all">
                                <label for="assignee-all">全选</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="assignee-zhang" value="zhang">
                                <label for="assignee-zhang">张三</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="assignee-li" value="li">
                                <label for="assignee-li">李四</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="filter-group">
                    <label class="filter-label">按优先级</label>
                    <div class="filter-select-wrapper">
                        <div class="filter-select" id="priorityView">选择优先级</div>
                        <div class="selected-count">0</div>
                        <div class="checkbox-container">
                            <div class="checkbox-option select-all">
                                <input type="checkbox" id="priority-all">
                                <label for="priority-all">全选</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="priority-high" value="high">
                                <label for="priority-high">高优先级</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="priority-medium" value="medium">
                                <label for="priority-medium">中优先级</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="priority-low" value="low">
                                <label for="priority-low">低优先级</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="filter-group">
                    <label class="filter-label">按时间</label>
                    <div class="filter-select-wrapper">
                        <div class="filter-select" id="timeView">选择时间</div>
                        <div class="selected-count">0</div>
                        <div class="checkbox-container">
                            <div class="checkbox-option select-all">
                                <input type="checkbox" id="time-all">
                                <label for="time-all">全选</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="time-expired" value="expired">
                                <label for="time-expired">已过期</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="time-today" value="today">
                                <label for="time-today">今日</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="time-tomorrow" value="tomorrow">
                                <label for="time-tomorrow">明日</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="time-week" value="week">
                                <label for="time-week">本周</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="time-month" value="month">
                                <label for="time-month">本月</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="time-year" value="year">
                                <label for="time-year">今年</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="time-future" value="future">
                                <label for="time-future">未来</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="filter-group">
                    <label class="filter-label">状态筛选</label>
                    <div class="filter-select-wrapper">
                        <div class="filter-select" id="statusFilter">选择状态</div>
                        <div class="selected-count">0</div>
                        <div class="checkbox-container">
                            <div class="checkbox-option select-all">
                                <input type="checkbox" id="status-all">
                                <label for="status-all">全选</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="status-filter-todo" value="todo">
                                <label for="status-filter-todo">待办</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="status-filter-in-progress" value="in-progress">
                                <label for="status-filter-in-progress">进行中</label>
                            </div>
                            <div class="checkbox-option">
                                <input type="checkbox" id="status-filter-completed" value="completed">
                                <label for="status-filter-completed">已完成</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 抽屉切换按钮 -->
        <button class="drawer-toggle" aria-label="切换筛选抽屉">
            <svg viewBox="0 0 24 24">
                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
            </svg>
        </button>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <header class="header">
                <h1>我的任务列表</h1>
                <div class="current-time" id="currentTime"></div>
            </header>

            <!-- 总体统计信息 -->
            <div class="stats-container">
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-number">0</div>
                        <div class="stat-label">总任务数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">0</div>
                        <div class="stat-label">进行中</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">0</div>
                        <div class="stat-label">待办</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">0</div>
                        <div class="stat-label">已完成</div>
                    </div>
                </div>
            </div>

            <!-- 修改任务组标题，添加统计信息 -->
            <div class="task-group">
                <div class="group-header">
                    <h2 class="group-title">张三的任务</h2>
                    <div class="group-stats">
                        <div class="group-stat">
                            <span class="group-stat-label">总计</span>
                            <span class="group-stat-number">6</span>
                        </div>
                        <div class="group-stat priority-stat high">
                            <span class="group-stat-label">高优先级</span>
                            <span class="group-stat-number">2</span>
                        </div>
                        <div class="group-stat status-stat in-progress">
                            <span class="group-stat-label">进行中</span>
                            <span class="group-stat-number">1</span>
                        </div>
                    </div>
                </div>
                <button class="scroll-button prev">
                    <svg viewBox="0 0 24 24">
                        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                    </svg>
                </button>
                <button class="scroll-button next">
                    <svg viewBox="0 0 24 24">
                        <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
                    </svg>
                </button>
                <div class="task-cards">
                    <!-- 任务1 -->
                    <div class="task-card">
                        <div class="task-card__header">
                            <h2 class="task-card__title">项目需求分析</h2>
                            <span class="task-card__priority priority-high">高优先级</span>
                        </div>
                        <div class="task-card__date">截止日期: 2024年3月15日</div>
                        <p class="task-card__description">
                            收集并分析客户需求，制定详细的需求文档，确保项目目标明确。
                        </p>
                        <div class="task-card__footer">
                            <div class="task-card__status">
                                <span class="status-indicator status-in-progress"></span>
                                <span class="status-text">进行中</span>
                            </div>
                            <div class="task-card__assigned">
                                <div class="assigned-avatar">
                                    <span>张</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 任务2 -->
                    <div class="task-card">
                        <div class="task-card__header">
                            <h2 class="task-card__title">系统架构设计</h2>
                            <span class="task-card__priority priority-high">高优先级</span>
                        </div>
                        <div class="task-card__date">截止日期: 2024年3月20日</div>
                        <p class="task-card__description">
                            设计系统整体架构，包括技术选型、数据流程和接口规范。
                        </p>
                        <div class="task-card__footer">
                            <div class="task-card__status">
                                <span class="status-indicator status-todo"></span>
                                <span class="status-text">待办</span>
                            </div>
                            <div class="task-card__assigned">
                                <div class="assigned-avatar">
                                    <span>张</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 任务3 -->
                    <div class="task-card">
                        <div class="task-card__header">
                            <h2 class="task-card__title">数据库设计</h2>
                            <span class="task-card__priority priority-medium">中优先级</span>
                        </div>
                        <div class="task-card__date">截止日期: 2024年3月25日</div>
                        <p class="task-card__description">
                            设计数据库结构，包括表结构、索引和存储过程。
                        </p>
                        <div class="task-card__footer">
                            <div class="task-card__status">
                                <span class="status-indicator status-todo"></span>
                                <span class="status-text">待办</span>
                            </div>
                            <div class="task-card__assigned">
                                <div class="assigned-avatar">
                                    <span>张</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 任务4 -->
                    <div class="task-card">
                        <div class="task-card__header">
                            <h2 class="task-card__title">接口文档编写</h2>
                            <span class="task-card__priority priority-medium">中优先级</span>
                        </div>
                        <div class="task-card__date">截止日期: 2024年3月30日</div>
                        <p class="task-card__description">
                            编写详细的API接口文档，包括请求参数、响应格式和错误码说明。
                        </p>
                        <div class="task-card__footer">
                            <div class="task-card__status">
                                <span class="status-indicator status-todo"></span>
                                <span class="status-text">待办</span>
                            </div>
                            <div class="task-card__assigned">
                                <div class="assigned-avatar">
                                    <span>张</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 任务5 -->
                    <div class="task-card">
                        <div class="task-card__header">
                            <h2 class="task-card__title">性能优化方案</h2>
                            <span class="task-card__priority priority-low">低优先级</span>
                        </div>
                        <div class="task-card__date">截止日期: 2024年4月5日</div>
                        <p class="task-card__description">
                            制定系统性能优化方案，包括缓存策略、SQL优化和代码重构建议。
                        </p>
                        <div class="task-card__footer">
                            <div class="task-card__status">
                                <span class="status-indicator status-todo"></span>
                                <span class="status-text">待办</span>
                            </div>
                            <div class="task-card__assigned">
                                <div class="assigned-avatar">
                                    <span>张</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 任务6 -->
                    <div class="task-card">
                        <div class="task-card__header">
                            <h2 class="task-card__title">代码审查</h2>
                            <span class="task-card__priority priority-medium">中优先级</span>
                        </div>
                        <div class="task-card__date">截止日期: 2024年4月10日</div>
                        <p class="task-card__description">
                            对团队成员提交的代码进行审查，确保代码质量和规范性。
                        </p>
                        <div class="task-card__footer">
                            <div class="task-card__status">
                                <span class="status-indicator status-todo"></span>
                                <span class="status-text">待办</span>
                            </div>
                            <div class="task-card__assigned">
                                <div class="assigned-avatar">
                                    <span>张</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他负责人的任务组 -->
            <div class="task-group">
                <div class="group-header">
                    <h2 class="group-title">李四的任务</h2>
                    <div class="group-stats">
                        <div class="group-stat">
                            <span class="group-stat-label">总计</span>
                            <span class="group-stat-number">1</span>
                        </div>
                        <div class="group-stat priority-stat medium">
                            <span class="group-stat-label">中优先级</span>
                            <span class="group-stat-number">1</span>
                        </div>
                        <div class="group-stat status-stat in-progress">
                            <span class="group-stat-label">进行中</span>
                            <span class="group-stat-number">1</span>
                        </div>
                    </div>
                </div>
                <button class="scroll-button prev">
                    <svg viewBox="0 0 24 24">
                        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                    </svg>
                </button>
                <button class="scroll-button next">
                    <svg viewBox="0 0 24 24">
                        <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
                    </svg>
                </button>
                <div class="task-cards">
                    <!-- 李四的任务卡片 -->
                    <div class="task-card">
                        <div class="task-card__header">
                            <h2 class="task-card__title">前端开发</h2>
                            <span class="task-card__priority priority-medium">中优先级</span>
                        </div>
                        <div class="task-card__date">截止日期: 2024年3月25日</div>
                        <p class="task-card__description">
                            负责用户界面开发，确保良好的用户体验。
                        </p>
                        <div class="task-card__footer">
                            <div class="task-card__status">
                                <span class="status-indicator status-in-progress"></span>
                                <span class="status-text">进行中</span>
                            </div>
                            <div class="task-card__assigned">
                                <div class="assigned-avatar">
                                    <span>李</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 定义数据
        const taskData = {
            "tasks": [
                {
                    "id": "1",
                    "title": "项目需求分析",
                    "description": "收集并分析客户需求，制定详细的需求文档，确保项目目标明确。",
                    "priority": "high",
                    "status": "in-progress",
                    "dueDate": "2024-03-15",
                    "assignee": "zhang"
                },
                {
                    "id": "2",
                    "title": "系统架构设计",
                    "description": "设计系统整体架构，包括技术选型、数据流程和接口规范。",
                    "priority": "high",
                    "status": "todo",
                    "dueDate": "2024-03-20",
                    "assignee": "zhang"
                },
                {
                    "id": "3",
                    "title": "数据库设计",
                    "description": "设计数据库结构，包括表结构、索引和存储过程。",
                    "priority": "medium",
                    "status": "todo",
                    "dueDate": "2024-03-25",
                    "assignee": "zhang"
                },
                {
                    "id": "4",
                    "title": "接口文档编写",
                    "description": "编写详细的API接口文档，包括请求参数、响应格式和错误码说明。",
                    "priority": "medium",
                    "status": "todo",
                    "dueDate": "2024-03-30",
                    "assignee": "zhang"
                },
                {
                    "id": "5",
                    "title": "性能优化方案",
                    "description": "制定系统性能优化方案，包括缓存策略、SQL优化和代码重构建议。",
                    "priority": "low",
                    "status": "todo",
                    "dueDate": "2024-04-05",
                    "assignee": "zhang"
                },
                {
                    "id": "6",
                    "title": "代码审查",
                    "description": "对团队成员提交的代码进行审查，确保代码质量和规范性。",
                    "priority": "medium",
                    "status": "todo",
                    "dueDate": "2024-04-10",
                    "assignee": "zhang"
                },
                {
                    "id": "7",
                    "title": "前端开发",
                    "description": "负责用户界面开发，确保良好的用户体验。",
                    "priority": "medium",
                    "status": "in-progress",
                    "dueDate": "2024-03-25",
                    "assignee": "li"
                },
                {
                    "id": "8",
                    "title": "单元测试编写",
                    "description": "为系统核心功能编写单元测试，确保代码质量和可维护性。",
                    "priority": "high",
                    "status": "todo",
                    "dueDate": "2024-04-15",
                    "assignee": "zhang"
                },
                {
                    "id": "9",
                    "title": "系统部署文档",
                    "description": "编写系统部署文档，包括环境配置、部署步骤和注意事项。",
                    "priority": "medium",
                    "status": "todo",
                    "dueDate": "2024-04-20",
                    "assignee": "zhang"
                },
                {
                    "id": "10",
                    "title": "系统安全评估",
                    "description": "进行系统安全评估，识别潜在安全风险并提供解决方案。",
                    "priority": "high",
                    "status": "todo",
                    "dueDate": "2025-03-19",
                    "assignee": "zhang"
                },
                {
                    "id": "11",
                    "title": "性能测试报告",
                    "description": "编写系统性能测试报告，包括负载测试和压力测试结果分析。",
                    "priority": "medium",
                    "status": "todo",
                    "dueDate": "2025-04-01",
                    "assignee": "zhang"
                },
                {
                    "id": "12",
                    "title": "用户手册编写",
                    "description": "编写系统用户手册，包括功能说明、操作指南和常见问题解答。",
                    "priority": "medium",
                    "status": "todo",
                    "dueDate": "2025-05-01",
                    "assignee": "zhang"
                },
                {
                    "id": "13",
                    "title": "系统监控方案",
                    "description": "设计系统监控方案，包括日志收集、性能监控和告警机制。",
                    "priority": "high",
                    "status": "todo",
                    "dueDate": "2025-05-01",
                    "assignee": "zhang"
                },
                {
                    "id": "14",
                    "title": "技术文档整理",
                    "description": "整理项目技术文档，包括架构设计、开发规范和部署文档。",
                    "priority": "medium",
                    "status": "todo",
                    "dueDate": "2025-04-01",
                    "assignee": "zhang"
                },
                {
                    "id": "15",
                    "title": "今日紧急任务",
                    "description": "处理系统紧急bug修复，确保系统稳定运行。",
                    "priority": "high",
                    "status": "in-progress",
                    "dueDate": new Date().toISOString().split('T')[0],
                    "assignee": "zhang"
                },
                {
                    "id": "16",
                    "title": "明日会议准备",
                    "description": "准备明日项目进度汇报会议的材料。",
                    "priority": "medium",
                    "status": "todo",
                    "dueDate": new Date(new Date().setDate(new Date().getDate() + 1)).toISOString().split('T')[0],
                    "assignee": "zhang"
                },
                {
                    "id": "17", 
                    "title": "本周代码审查",
                    "description": "完成本周所有代码提交的审查工作。",
                    "priority": "medium",
                    "status": "todo",
                    "dueDate": new Date(new Date().setDate(new Date().getDate() + 3)).toISOString().split('T')[0],
                    "assignee": "zhang"
                }
            ]
        };

        const userData = {
            "users": [
                {
                    "id": "zhang",
                    "name": "张三",
                    "avatar": "张"
                },
                {
                    "id": "li",
                    "name": "李四",
                    "avatar": "李"
                }
            ]
        };

        const priorityData = {
            "priorities": [
                {
                    "id": "high",
                    "name": "高优先级",
                    "color": "#ef4444",
                    "bgColor": "#fee2e2"
                },
                {
                    "id": "medium",
                    "name": "中优先级",
                    "color": "#f59e0b",
                    "bgColor": "#fef3c7"
                },
                {
                    "id": "low",
                    "name": "低优先级",
                    "color": "#10b981",
                    "bgColor": "#dcfce7"
                }
            ]
        };

        const statusData = {
            "statuses": [
                {
                    "id": "todo",
                    "name": "待办",
                    "color": "#64748b",
                    "bgColor": "#f1f5f9"
                },
                {
                    "id": "in-progress",
                    "name": "进行中",
                    "color": "#3b82f6",
                    "bgColor": "#dbeafe"
                },
                {
                    "id": "completed",
                    "name": "已完成",
                    "color": "#10b981",
                    "bgColor": "#dcfce7"
                }
            ]
        };

        // 渲染任务卡片
        function renderTasks() {
            const mainContent = document.querySelector('.main-content');
            const headerAndStats = mainContent.innerHTML.split('<div class="task-group">')[0];
            mainContent.innerHTML = headerAndStats;

            // 获取当前显示的时间
            const currentTimeElement = document.getElementById('currentTime');
            const currentTimeText = currentTimeElement.textContent;
            const [datePart] = currentTimeText.split(' ');
            const [year, month, day] = datePart.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/).slice(1);
            const currentTime = new Date(year, parseInt(month) - 1, parseInt(day));
            currentTime.setHours(0, 0, 0, 0);

            // 获取筛选条件
            const searchQuery = document.getElementById('taskSearch').value.toLowerCase();
            const assigneeView = getSelectedValues(document.getElementById('assigneeView').closest('.filter-select-wrapper'));
            const timeView = getSelectedValues(document.getElementById('timeView').closest('.filter-select-wrapper'));
            const priorityView = getSelectedValues(document.getElementById('priorityView').closest('.filter-select-wrapper'));
            const statusFilter = getSelectedValues(document.getElementById('statusFilter').closest('.filter-select-wrapper'));

            // 根据筛选条件过滤任务
            let filteredTasks = taskData.tasks.filter(task => {
                const matchPriority = priorityView.length === 0 || priorityView.includes(task.priority);
                const matchStatus = statusFilter.length === 0 || statusFilter.includes(task.status);
                const matchSearch = !searchQuery || 
                    task.title.toLowerCase().includes(searchQuery) ||
                    task.description.toLowerCase().includes(searchQuery);
                return matchPriority && matchStatus && matchSearch;
            });

            // 根据视图模式分组任务
            let groupedTasks = {};
            if (assigneeView.length > 0) {
                // 按负责人分组
                filteredTasks = filteredTasks.filter(task => assigneeView.includes(task.assignee));
                filteredTasks.forEach(task => {
                    const assignee = userData.users.find(u => u.id === task.assignee);
                    if (!groupedTasks[task.assignee]) {
                        groupedTasks[task.assignee] = {
                            title: assignee.name,
                            tasks: []
                        };
                    }
                    groupedTasks[task.assignee].tasks.push(task);
                });
            } else if (timeView.length > 0) {
                // 按时间分组
                const today = currentTime;
                const tomorrow = new Date(today);
                tomorrow.setDate(tomorrow.getDate() + 1);
                
                // 计算本周的开始和结束时间
                const weekStart = new Date(today);
                weekStart.setDate(today.getDate() - today.getDay()); // 本周日
                const weekEnd = new Date(weekStart);
                weekEnd.setDate(weekStart.getDate() + 6); // 本周六
                weekEnd.setHours(23, 59, 59, 999);
                
                // 计算本月的开始和结束时间
                const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
                const monthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0);
                monthEnd.setHours(23, 59, 59, 999);
                
                // 计算今年的开始和结束时间
                const yearStart = new Date(today.getFullYear(), 0, 1);
                const yearEnd = new Date(today.getFullYear(), 11, 31);
                yearEnd.setHours(23, 59, 59, 999);

                // 将过滤后的任务添加到对应的时间组
                timeView.forEach(time => {
                    const timeGroupTasks = filteredTasks.filter(task => {
                        const taskDate = new Date(task.dueDate);
                        taskDate.setHours(0, 0, 0, 0);
                        
                        switch(time) {
                            case 'expired':
                                return taskDate < today && task.status !== 'completed';
                            case 'today':
                                return taskDate.getTime() === today.getTime();
                            case 'tomorrow':
                                return taskDate.getTime() === tomorrow.getTime();
                            case 'week':
                                return taskDate >= weekStart && taskDate <= weekEnd;
                            case 'month':
                                return taskDate >= monthStart && taskDate <= monthEnd;
                            case 'year':
                                return taskDate >= yearStart && taskDate <= yearEnd;
                            case 'future':
                                return taskDate > today;
                            default:
                                return false;
                        }
                    });
                    
                    if (timeGroupTasks.length > 0) {
                        groupedTasks[time] = {
                            title: getTimeGroupTitle(time),
                            tasks: timeGroupTasks
                        };
                    }
                });
            } else {
                // 默认按负责人分组
                filteredTasks.forEach(task => {
                    const assignee = userData.users.find(u => u.id === task.assignee);
                    if (!groupedTasks[task.assignee]) {
                        groupedTasks[task.assignee] = {
                            title: assignee.name,
                            tasks: []
                        };
                    }
                    groupedTasks[task.assignee].tasks.push(task);
                });
            }

            // 渲染每个任务组
            Object.entries(groupedTasks).forEach(([key, group]) => {
                const taskGroup = document.createElement('div');
                taskGroup.className = 'task-group';
                
                const groupStats = calculateGroupStats(group.tasks);
                
                taskGroup.innerHTML = `
                    <div class="group-header">
                        <h2 class="group-title">${group.title}</h2>
                        <div class="group-stats">
                            <div class="group-stat">
                                <span class="group-stat-label">总计</span>
                                <span class="group-stat-number">${groupStats.total}</span>
                            </div>
                            ${renderPriorityStats(groupStats)}
                            ${renderStatusStats(groupStats)}
                        </div>
                    </div>
                    <button class="scroll-button prev">
                        <svg viewBox="0 0 24 24">
                            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                        </svg>
                    </button>
                    <button class="scroll-button next">
                        <svg viewBox="0 0 24 24">
                            <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
                        </svg>
                    </button>
                    <div class="task-cards">
                        ${group.tasks.map(task => renderTaskCard(task)).join('')}
                    </div>
                `;
                
                mainContent.appendChild(taskGroup);
            });

            // 重新初始化滚动按钮
            initializeScrollButtons();
        }

        // 渲染单个任务卡片
        function renderTaskCard(task) {
            const priority = priorityData.priorities.find(p => p.id === task.priority);
            const status = statusData.statuses.find(s => s.id === task.status);
            const assignee = userData.users.find(u => u.id === task.assignee);
            
            return `
                <div class="task-card">
                    <div class="task-card__header">
                        <h2 class="task-card__title">${task.title}</h2>
                        <span class="task-card__priority priority-${task.priority}" style="background-color: ${priority.bgColor}; color: ${priority.color}">
                            ${priority.name}
                        </span>
                    </div>
                    <div class="task-card__date">截止日期: ${formatDate(task.dueDate)}</div>
                    <p class="task-card__description">${task.description}</p>
                    <div class="task-card__footer">
                        <div class="task-card__status">
                            <span class="status-indicator status-${task.status}" style="background-color: ${status.color}"></span>
                            <span class="status-text">${status.name}</span>
                        </div>
                        <div class="task-card__assigned">
                            <div class="assigned-avatar">
                                <span>${assignee.avatar}</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 计算组统计信息
        function calculateGroupStats(tasks) {
            return {
                total: tasks.length,
                byPriority: tasks.reduce((acc, task) => {
                    acc[task.priority] = (acc[task.priority] || 0) + 1;
                    return acc;
                }, {}),
                byStatus: tasks.reduce((acc, task) => {
                    acc[task.status] = (acc[task.status] || 0) + 1;
                    return acc;
                }, {})
            };
        }

        // 渲染优先级统计
        function renderPriorityStats(stats) {
            const priorities = ['high', 'medium', 'low'];
            const highestPriority = priorities.find(p => stats.byPriority[p] > 0) || 'low';
            const priorityConfig = priorityData.priorities.find(p => p.id === highestPriority);
            
            return `
                <div class="group-stat priority-stat ${highestPriority}" style="background-color: ${priorityConfig.bgColor}; color: ${priorityConfig.color}">
                    <span class="group-stat-label">${priorityConfig.name}</span>
                    <span class="group-stat-number">${stats.byPriority[highestPriority] || 0}</span>
                </div>
            `;
        }

        // 渲染状态统计
        function renderStatusStats(stats) {
            const statuses = ['in-progress', 'completed', 'todo'];
            const currentStatus = statuses.find(s => stats.byStatus[s] > 0) || 'todo';
            const statusConfig = statusData.statuses.find(s => s.id === currentStatus);
            
            return `
                <div class="group-stat status-stat ${currentStatus}" style="background-color: ${statusConfig.bgColor}; color: ${statusConfig.color}">
                    <span class="group-stat-label">${statusConfig.name}</span>
                    <span class="group-stat-number">${stats.byStatus[currentStatus] || 0}</span>
                </div>
            `;
        }

        // 更新任务统计信息
        function updateTaskStats() {
            // 获取筛选条件
            const priorityView = getSelectedValues(document.getElementById('priorityView').closest('.filter-select-wrapper'));
            const statusFilter = getSelectedValues(document.getElementById('statusFilter').closest('.filter-select-wrapper'));

            // 根据筛选条件过滤任务
            const filteredTasks = taskData.tasks.filter(task => {
                const matchPriority = priorityView.length === 0 || priorityView.includes(task.priority);
                const matchStatus = statusFilter.length === 0 || statusFilter.includes(task.status);
                return matchPriority && matchStatus;
            });

            const stats = {
                total: filteredTasks.length,
                inProgress: filteredTasks.filter(t => t.status === 'in-progress').length,
                todo: filteredTasks.filter(t => t.status === 'todo').length,
                completed: filteredTasks.filter(t => t.status === 'completed').length
            };

            const statsGrid = document.querySelector('.stats-grid');
            if (statsGrid) {
                statsGrid.innerHTML = `
                    <div class="stat-item">
                        <div class="stat-number">${stats.total}</div>
                        <div class="stat-label">总任务数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">${stats.inProgress}</div>
                        <div class="stat-label">进行中</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">${stats.todo}</div>
                        <div class="stat-label">待办</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">${stats.completed}</div>
                        <div class="stat-label">已完成</div>
                    </div>
                `;
            }
        }

        // 初始化筛选器
        function initializeFilters() {
            // 为每个筛选器添加点击事件
            document.querySelectorAll('.filter-select').forEach(select => {
                const wrapper = select.closest('.filter-select-wrapper');
                const checkboxContainer = wrapper.querySelector('.checkbox-container');
                const selectedCount = wrapper.querySelector('.selected-count');
                const checkboxes = checkboxContainer.querySelectorAll('input[type="checkbox"]:not([id$="-all"])');
                const allCheckbox = checkboxContainer.querySelector('input[type="checkbox"][id$="-all"]');

                // 设置初始占位符文本
                select.setAttribute('data-placeholder', select.textContent);

                // 点击选择框时显示/隐藏复选框容器
                select.addEventListener('click', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    // 先关闭所有其他的复选框容器
                    document.querySelectorAll('.checkbox-container.show').forEach(container => {
                        if (container !== checkboxContainer) {
                            container.classList.remove('show');
                        }
                    });
                    checkboxContainer.classList.toggle('show');
                });

                // 处理全选功能
                if (allCheckbox) {
                    allCheckbox.addEventListener('change', (e) => {
                        e.stopPropagation();
                        checkboxes.forEach(checkbox => {
                            checkbox.checked = allCheckbox.checked;
                        });
                        updateSelectedCount(wrapper);
                        updateSelectText(wrapper);
                        renderTasks();
                        updateTaskStats();
                    });
                }

                // 点击复选框时更新选中状态和显示文本
                checkboxes.forEach(checkbox => {
                    checkbox.addEventListener('change', (e) => {
                        e.stopPropagation();
                        // 更新全选框状态
                        if (allCheckbox) {
                            const allChecked = Array.from(checkboxes).every(cb => cb.checked);
                            const someChecked = Array.from(checkboxes).some(cb => cb.checked);
                            allCheckbox.checked = allChecked;
                            allCheckbox.indeterminate = someChecked && !allChecked;
                        }
                        updateSelectedCount(wrapper);
                        updateSelectText(wrapper);
                        renderTasks();
                        updateTaskStats();
                    });
                });

                // 点击复选框容器时阻止事件冒泡
                checkboxContainer.addEventListener('click', (e) => {
                    e.stopPropagation();
                });
            });

            // 点击其他地方时隐藏所有复选框容器
            document.addEventListener('click', () => {
                document.querySelectorAll('.checkbox-container.show').forEach(container => {
                    container.classList.remove('show');
                });
            });

            // 添加搜索框事件监听
            const searchInput = document.getElementById('taskSearch');
            let searchTimeout;
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    renderTasks();
                    updateTaskStats();
                }, 300);
            });
        }

        // 更新选中项计数
        function updateSelectedCount(wrapper) {
            const checkboxes = wrapper.querySelectorAll('input[type="checkbox"]:not([id$="-all"]):checked');
            const selectedCount = wrapper.querySelector('.selected-count');
            const filterGroup = wrapper.closest('.filter-group');
            
            selectedCount.textContent = checkboxes.length;
            
            if (checkboxes.length > 0) {
                filterGroup.classList.add('has-selection');
            } else {
                filterGroup.classList.remove('has-selection');
            }
        }

        // 更新选择框显示文本
        function updateSelectText(wrapper) {
            const select = wrapper.querySelector('.filter-select');
            const checkboxes = wrapper.querySelectorAll('input[type="checkbox"]:not([id$="-all"]):checked');
            const labels = Array.from(checkboxes).map(cb => cb.nextElementSibling.textContent);
            
            if (labels.length === 0) {
                select.textContent = select.getAttribute('data-placeholder');
            } else if (labels.length === 1) {
                select.textContent = labels[0];
            } else {
                select.textContent = `已选择 ${labels.length} 项`;
            }
        }

        // 获取选中的值
        function getSelectedValues(wrapper) {
            const checkboxes = wrapper.querySelectorAll('input[type="checkbox"]:not([id$="-all"]):checked');
            return Array.from(checkboxes).map(checkbox => checkbox.value);
        }

        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }

        // 初始化滚动按钮
        function initializeScrollButtons() {
            document.querySelectorAll('.task-group').forEach(group => {
                const taskCards = group.querySelector('.task-cards');
                const prevButton = group.querySelector('.scroll-button.prev');
                const nextButton = group.querySelector('.scroll-button.next');
                
                const scrollAmount = 320;
                
                const updateScrollButtons = () => {
                    prevButton.style.display = taskCards.scrollLeft > 0 ? 'flex' : 'none';
                    nextButton.style.display = 
                        taskCards.scrollLeft < (taskCards.scrollWidth - taskCards.clientWidth) 
                        ? 'flex' : 'none';
                };
                
                updateScrollButtons();
                
                taskCards.addEventListener('scroll', updateScrollButtons);
                
                prevButton.addEventListener('click', () => {
                    taskCards.scrollBy({
                        left: -scrollAmount,
                        behavior: 'smooth'
                    });
                });
                
                nextButton.addEventListener('click', () => {
                    taskCards.scrollBy({
                        left: scrollAmount,
                        behavior: 'smooth'
                    });
                });
            });
        }

        // 添加抽屉切换功能
        const drawerToggle = document.querySelector('.drawer-toggle');
        const layoutContainer = document.querySelector('.layout-container');
        const body = document.body;

        drawerToggle.addEventListener('click', () => {
            if (window.innerWidth <= 768) {
                body.classList.toggle('drawer-open');
            } else {
                layoutContainer.classList.toggle('drawer-collapsed');
            }
        });

        window.addEventListener('resize', () => {
            if (window.innerWidth <= 768) {
                layoutContainer.classList.remove('drawer-collapsed');
                if (!body.classList.contains('drawer-open')) {
                    body.classList.remove('drawer-open');
                }
            }
        });

        document.querySelector('.main-content').addEventListener('click', () => {
            if (window.innerWidth <= 768 && body.classList.contains('drawer-open')) {
                body.classList.remove('drawer-open');
            }
        });

        // 获取时间组标题
        function getTimeGroupTitle(timeView) {
            const titles = {
                'expired': '已过期',
                'today': '今日',
                'tomorrow': '明日',
                'week': '本周',
                'month': '本月',
                'year': '今年',
                'future': '未来'
            };
            return titles[timeView] || '';
        }

        // 初始化页面
        function updateCurrentTime() {
            const now = new Date();
            const options = {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'long',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            };
            document.getElementById('currentTime').textContent = now.toLocaleDateString('zh-CN', options).replace(/\//g, '-');
        }

        updateCurrentTime(); // 立即更新一次
        setInterval(updateCurrentTime, 1000); // 每秒更新一次
        renderTasks();
        updateTaskStats();
        initializeFilters();

        // 添加任务按钮
        const addTaskButton = document.createElement('button');
        addTaskButton.className = 'add-task-btn';
        document.body.appendChild(addTaskButton);
    </script>
</body>
</html> 